@import "../../../colors";
@import "../../../frameless";

$tile-height: 244px;

.donate-banner {
    display: flex;
    position: sticky;
    z-index: 8;
    background-color: $ui-aqua-dark;
    padding: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;

    .donate-container {
        display: flex;
        margin: 0.375rem auto;
        align-items: center;

        .donate-icon {
            margin: 0.6875rem;
            width: 1.75rem;
            height: 1.75rem;
        }

        .donate-central-items {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .donate-text {
            text-align: left;
            color: $ui-white;
            font-size: 1rem;
            font-weight: bold;
            margin-right: 1rem;
            max-width: 70vw;
        }

        .donate-button {
            margin: 0 7rem 0 .5rem;
            border-radius: 1.25rem;
            background-color: $ui-white;
            color: $ui-aqua-dark;
            padding: 0 1.75rem;
            height: 2.25rem;
            text-decoration: none;
            line-height: .875rem;
            font-size: 1rem;
            font-weight: bold;
        }
    }

    .donate-close-button {
        right: 1rem;
        top: auto;
    }
    a {
        color: $ui-white;
        text-decoration: underline;
    }
}

@media only screen and (max-width: $mobileIntermediate) {
    .donate-banner .donate-container .donate-central-items {
        flex-wrap: wrap;
    }
    .donate-banner .donate-container .donate-icon {
        padding-bottom: 2rem;
    }
    .donate-banner .donate-container .donate-button {
        margin-left: 0;
        margin-bottom: 1rem
    }
    .donate-banner .donate-close-button {
        top: 1rem;
    }
}
